<template>
	<!-- 斗地主 -->
	<view class="game">
		<view class="main_wrap">
			<view class="p1">
				<player1 v-if="player1" />
				<text v-else class="loading">等待玩家加入</text>
			</view>
			<view class="center">
				<view class="center_top">
					<!-- 左边工具栏 -->
					<view></view>
					<view class="card_buffer">
						<image :src="`/static/pkp/${v.type}_${v.value}.jpg`" :key="i" v-for="(v,i) in landLordCards" ></image>
						<template v-if="!landLordCards||!landLordCards.length">
							<image src="../../static/pkp/back_card.jpg"></image>
							<image src="../../static/pkp/back_card.jpg"></image>
							<image src="../../static/pkp/back_card.jpg"></image>
						</template>
					</view>
					<!-- 右边工具栏 -->
					<view></view>
				</view>
				<view class="center_bottom"></view>
			</view>
			<view class="p3">
				<player3 v-if="player3" />
				<text v-else class="loading">等待玩家加入</text>
			</view>
		</view>
		<Player2 />
	</view>
</template>

<script>
	import Player2 from './player.vue'
	import Player1 from './player1.vue'
	import Player3 from './player3.vue'
	import Player from '../../lib/Player.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "gamed",
		components: {
			Player1,
			Player2,
			Player3
		},
		data() {
			return {
				playerid: '',
				playerArr:[],
				isjoin: false
			};
		},
		computed: {
			...mapState(['player1', 'player2', 'player3','players','landLordCards'])
		},
		created() {
			let that = this;
			this.playerid = this.guid();
			this.getPlayerList();

			uni.onSocketMessage(function(res) {
				let data = JSON.parse(res.data);
				switch (data.cmd) {
					case 'join':
						that.playerJoin(data);
						break;
					case 'ext':
						that.playerExt(data.message);
						break;
					case 'SendCard':
						that.sendCard(data.data);
						break;
					case 'go':
						that.playerGo(data.data);
						break;
					case 'landlordplayer':
						that.landlordplayer(data.data);
						break;
					case 'playerToScore':
						that.playerToScore(data.data);
						break;
					case 'landlord':
						that.landlord(data.data);
						break;
					case 'reset':
						that.reStart();
						break;
					case 'playerReady':
						that.playerReady(data.data);
						break;
					
				}
			})
		},
		methods: {
			...mapMutations(['setPlayerProp', 'setProps' , 'setPlayersProps']),
			//用于生成uuid
			S4() {
				return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
			},
			guid() {
				return (this.S4() + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() +
					this.S4() + this.S4());
			},
			//获取玩家列表
			getPlayerList() {
				let that = this;
				uni.request({
					url: 'http://192.168.71.136:83/allUsers',
					success(res) {
						that.playerArr = res.data;
						console.log(res.data)
						for(let i of that.playerArr){
							that.setPlayersProps({
								key:i,
								prop:'id',
								value:i
							})
						}
						that.setPlayersProps({
							key:that.playerid,
							prop:'id',
							value:that.playerid
						})
						let playerArr = that.playerArr;
						if (playerArr.length == 0) {
							that.setProps({
								key: 'player2',
								value: that.players[that.playerid]
							})
						} else if (playerArr.length == 1) {
							that.setProps({
								key: 'player1',
								value: that.players[playerArr[0]]
							})
							that.setProps({
								key: 'player2',
								value: that.players[that.playerid]
							})
						} else {
							that.setProps({
								key: 'player3',
								value: that.players[playerArr[0]]
							})
							that.setProps({
								key: 'player1',
								value: that.players[playerArr[1]]
							})
							that.setProps({
								key: 'player2',
								value: that.players[that.playerid]
							})
						}
						that.playerArr.push(that.playerid);
						uni.connectSocket({
							url: 'ws://192.168.71.136:83/games/11?userid=' + that.playerid
						})
					}
				})
			},
			//玩家加入
			playerJoin(data) {
				let player = ""
				if (data.message != this.playerid) {
					if (!this.player1 && !this.player3) {
						player = "player3"
					} else if (!this.player1) {
						player = "player1"
					} else if (!this.player3) {
						player = "player3"
					}
					this.setPlayersProps({
						key:data.message,
						prop:'id',
						value:data.message
					})
					this.setProps({
						key: player,
						value: this.players[data.message]
					})
					this.playerArr.push(data.message);
				}

			},
			//玩家准备
			playerReady(data){
				this.setPlayersProps({
					key:data.userid,
					prop:'ready',
					value:data.ready
				})
			},
			//发牌
			sendCard(data) {
				this.setProps({
					key:'gameStart',
					value:true
				})
				this.setPlayersProps({
					key:data.userid,
					prop:'cards',
					value:data.cards.sort(function(a, b) {
						return b.value - a.value;
					})
				})
				this.setPlayerProp({
					player: 'player2',
					prop: 'cards',
					value: data.cards.sort(function(a, b) {
						return b.value - a.value;
					})
				})
				this.setPlayerProp({
					player: 'player1',
					prop: 'cards',
					value: data.cards.length
				})
				this.setPlayerProp({
					player: 'player3',
					prop: 'cards',
					value: data.cards.length
				})
			},
			//玩家叫分
			playerToScore(data){
				
				if(data.score!=0){
					this.setProps({
						key:'currentScore',
						value:data.score
					})
				}
				
				this.currentNext(data.userid);
			},
			//移动下一位出牌玩家
			currentNext(userid){
				for(let i in this.players){
					this.setPlayersProps({
						key:i,
						prop:'isCurrent',
						value:false
					})
				}
				let index = this.players[userid].key.split('r')[1]-0;
				this.setPlayerProp({
					player:'player'+(index+1>3?1:index+1),
					prop:'isCurrent',
					value:true
				})
				this.setPlayerProp({
					player:'player'+(index+1>3?1:index+1),
					prop:'buffer',
					value:[]
				})
			},
			//选出地主玩家
			landlord(data){
				for(let i in this.players){
					this.setPlayersProps({
						key:i,
						prop:'isCurrent',
						value:false
					})
				}
				this.setPlayersProps({
					key:data.userid,
					prop:'isLandlord',
					value:true
				})
				this.setPlayersProps({
					key:data.userid,
					prop:'isCurrent',
					value:true
				})
				data.cards.map(v=>{
					v.choose = true;
					return v;
				})
				if(data.userid==this.player2.id){
					let cards = this.player2.cards.concat(data.cards)
					this.setPlayersProps({
						key:this.player2.id,
						prop:'cards',
						value:cards.sort(function(a, b) {
							return b.value - a.value;
						})
					})
					setTimeout(()=>{
						cards.map(v=>{
							v.choose = false;
							return v;
						})
						this.setPlayersProps({
							key:this.player2.id,
							prop:'cards',
							value:cards
						})
					},2000)
				}else{
					this.players[data.userid].cards+=3;
				}
				this.setProps({
					key:'isChooseLandlord',
					value:false
				})
				this.setProps({
					key:'landLordCards',
					value:data.cards
				})
				console.log('地主',data);
			},
			//玩家出牌
			playerGo(data) {
				let player = [this.player1, this.player3].find(v => v.id == data.userid);
				if (player) {
					this.setPlayerProp({
						player: player.key,
						prop: 'buffer',
						value: data.cards
					})
					if (player.key == 'player2') return;
					if(data.cards[0].value!='不出'){
						this.setPlayerProp({
							player: player.key,
							prop: 'cards',
							value: this.players[data.userid].cards - data.cards.length
						})
					}
				}
				this.currentNext(data.userid)
			},
			//玩家退出
			playerExt(data) {
				this.resetGame();
				this.setPlayersProps({key:data});
			},
			//重置游戏
			resetGame() {
				this.setProps({
					key:'gameStart',
					value:false
				})
				this.setProps({
					key:'landLordCards',
					value:''
				})
				if(this.player1) this.player1.reset();
				if(this.player2) this.player2.reset();
				if(this.player3) this.player3.reset();
			},
			//重新开始
			reStart(){
				this.resetGame();
				uni.sendSocketMessage({
					data:JSON.stringify({
						cmd:'ready',
						data:{
							userid:this.playerid,
							isReady:true
						}
					})
				})
			},
			//确定叫地主的玩家
			landlordplayer(data) {
				for(let i in this.players){
					this.setPlayersProps({
						key:i,
						prop:'isCurrent',
						value:false
					})
				}
				this.setPlayersProps({
					key:data.userid,
					prop:'isCurrent',
					value:true
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.game {
		height: 100vh;
		background: url(../../static/img/scene.jpg) no-repeat;
		background-size: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 20upx;
		.main_wrap {
			flex: 1;
			display: flex;
			.p1,.p3{
				width: 150upx;
				height: 100%;
				.loading{
					display: block;
					width: 30upx;
					word-break: break-all;
					margin: auto;
					margin-top: 5vh;
					font-size: 25upx;
					color: white;
				}
			}
			.center {
				flex: 1;
				display: flex;
				flex-direction: column;

				&_top {
					height: 15vh;
					display: flex;
					view{
						flex: 1;
					}
					.card_buffer{
						flex: 4;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 35upx;
							height: 13vh;
							margin: 0 10upx;
						}
					}
				}

				&_bottom {
					flex: 1;
				}
			}
		}
	}
</style>
